<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 缩放（Resizable） - 默认功能</title>
  <link rel="stylesheet" href="jquery-ui-1.10.4.custom.min.css">
   <script type="text/javascript" src="jQuery-2.1.4.min.js" ></script>
  <script src="jquery-ui-1.10.4.custom.min.js"></script>
	
  <style>
  #resizable { width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }
  </style>
  <script>
  $(function() {
    $( "#resizable" ).resizable({
//  	   containment: "#container",//限制区域
//  	animate: true,//动画 
//  	 delay: 1000,//延迟
//  	  distance: 40,//延迟
//  	 helper: "ui-resizable-helper",  //helper 选项为一个 CSS class，当缩放时只显示元素的轮廓。
//		 alsoResize: "#also",//同步缩放
//		 grid: 50,
//		  ghost: true,//半透明
//  	  aspectRatio: 16 / 9,
//		maxHeight: 250,
//    	maxWidth: 350,
//    	minHeight: 150,
//   	 minWidth: 200
    	create:function(){
    		console.log("create")
    	},
    	resize:function(){
    		console.log("resize")
    	},
    	start:function(){
    		console.log("start")
    	},
    	stop:function(){
    		console.log("stop")
    	}
    });
  });
  </script>
</head>
<body>
 
<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">缩放（Resizable）</h3>
</div>
 
 
</body>
</html>